<template>
  <div class="main">
    <!-- 动态组件 -->
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <tool-bar @onChangeFragment="onChangeFragment" ref="toolBar"></tool-bar>
  </div>
</template>

<script>
import ToolBar from '@com/ToolBar.vue'
export default {
  name: 'main',
  components: {
    ToolBar,
    // 异步组件引入方式, 异步组件：只有在需要去展示这个组件的时候，才会把组件去进行渲染。
    'home': () => import('@com/Home'),
    'shopping': () => import('@com/Shopping'),
    'my': () => import('@com/My')
  },
  data () {
    return {
      currentComponent: 'home'
    }
  },
  activated () {
    console.log('%c 🥒 主页activated: ', 'font-size:20px;background-color: #FCA650;color:#fff;')
    // 在 keepAlive 被激活的时候，调用指定加载页面组件的方法
    this.pushFragment()
  },
  methods: {
    // 组件切换
    onChangeFragment: function (componentName) {
      this.currentComponent = componentName
    },
    /**
     * 指定加载的页面组件
     */
    pushFragment: function () {
      // 获取到组件加载的下标
      let componentIndex = this.$route.params.componentIndex
      // 如果没有下标的话，直接让方法 return 掉。
      if (componentIndex === undefined) return
      // 通过 toolbar 来切换对应的组件
      this.$refs.toolBar.pushFragment(componentIndex)
    }
  }

}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.main {
  position: absolute; //让每一个页面脱离文档流
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
